$(function(){
    class ShopCar{
        constructor(){
            this.init();
            this.shop = [];
        }
        init() {
            this.getData();
            this.bindEvent();
            this.changeTotalPrice();
        }
        getData() {
            this.shop = [];
            this.shopdata = JSON.parse(localStorage.getItem("shopdata"));
            if (this.shopdata !== null) {
              Object.keys(this.shopdata).forEach((item) => {
                this.shop.push(this.shopdata[parseInt(item)]);
              });
            }
            // console.log( this.shop.length);
            $(".shuliang").text(this.shop.length);
            $(".subtitle1").text(this.shop.length)
         
  
        }
        bindEvent(){
            let _this = this;
            this.goodscontain = $(".cart-goods-list");

            this.render();
            this.iptitem = $(".checkout_cb");
            this.iptall = $(".switch_cb_all");
            this.btn_increase = $(".btn-increase");
            this.btn_decrease = $(".btn-decrease");
            this.btn_delete  =  $(".btn-delete")
            this.price = $(".mone");
            this.cart_data = this.getCartData();

            //增
            this.btn_increase.click(function (e) {
                let id = $(e.target).attr("id");
                _this.addShop(id);
                _this.change(e);
                _this.changeTotalPrice();
            });
            //减
            this.btn_decrease.click(function (e) {
                let id = $(e.target).attr("id");
                _this.desShop(id);
                _this.change(e);
                _this.changeTotalPrice();
            });
           
            //删除
            this.btn_delete.click(function (e) {
                let id = $(e.target).attr("id");
                let trdom = $($(e.target).parentsUntil(".lli1")[1]).parent();
                trdom.remove();
                _this.removeShop(id);
                _this.change(e);
                _this.changeTotalPrice();
            });

            this.iptall.click(() => {
                if (this.iptall.prop("checked") == true) {
                  $("input[type='checkbox']").prop("checked", true);
                } else {
                  $("input[type='checkbox']").prop("checked", false);
                }
                _this.changeTotalPrice();
              });

            this.iptitem.click((e) => {
                // console.log(this.iptitem);
                for (var i = 0; i < this.iptitem.length; i++) {
                  if (this.iptitem.eq(i).prop("checked") == true) {
                    this.iptall.prop("checked", false);
                  }
                }
                _this.changeTotalPrice();
                // console.log(this.iptitem);
              });
        }
        getCartData() {
            try {
              var car = JSON.parse(localStorage.getItem("shopdata"));
              if (car == null) {
                return {};
              }
              return car;
            } catch (e) {
              return {};
            }
        }

        changeTotalPrice() {
            this.newShop = [];
          
            this.getData();

          

            //拿到数据后，判断每一件商品checkbox的选中是否为true，如果为true，讲该商品插入到新数组中，
            for (var i = 0; i < this.shop.length; i++) {
              if ($(this.iptitem[i]).prop("checked") == true) {
                this.newShop.push(this.shop[i]);
              }
            }
            this.sum = 0;
            for (let i = 0; i < this.newShop.length; i++) {
              this.sum +=
                this.newShop[i].count * parseInt(this.newShop[i].price.slice(1));
            }
            this.price.text("￥" + this.sum);
            $(".top-options1").text(this.newShop.length)
        
           

        }
        addShop(id) {
            // console.log(id);
            // console.log(this.cart_data);
        
            this.cart_data[id].count++;
            localStorage.setItem("shopdata", JSON.stringify(this.cart_data));
        }

        desShop(id) {
          if(this.cart_data[id].count>0){
            this.cart_data[id].count--;
         }else{
           return 0
         }
          localStorage.setItem("shopdata", JSON.stringify(this.cart_data));
        }
        change(e) {
            let tr = $(e.target).parentsUntil(".cart-item")[2];
            let ipt = $(e.target).parent().children("input");
            let id = $(e.target).attr("id");
            let money = this.cart_data[id].price.slice(1) * this.cart_data[id].count;
            $(tr)
              .children(".p-total")
              .text("￥" + money + ".00");
            ipt.val(this.cart_data[id].count);
        }
        removeShop(id) {
          delete this.cart_data[id];
          
            localStorage.setItem("shopdata", JSON.stringify(this.cart_data));
        }


        render(){
        // console.log(this.shop);
        for(var i = 0 ; i<this.shop.length;i++){
            this.goodscontain.append( `
            <li class="lli1">
                        <img src="${this.shop[i].img}" alt="">
                        <div class="goods-info">
                            <p class="goods-title">${this.shop[i].name}</p>
                            <p class="goods-price">${this.shop[i].price}</p>
                            <ul class="goods-props">
                                <li>
                                    <span class="cai1">材质</span>
                                    <span class="yan1">分色18K金</span>
                                    <span class="san1"></span>
                                </li>
                                <li>
                                    <span class="cai1">主钻</span>
                                    <span class="yan1">60分</span>
                                    <span class="san1"></span>
                                </li>
                                <li>
                                    <span class="cai1">尺寸</span>
                                    <span class="yan1">7</span>
                                    <span class="san1"></span>
                                </li>
                                <li>
                                    <span class="cai1">刻字内容</span>
                                    <span class="yan1">（暂无）</span>
                                    <span class="san11">修改</span>
                                </li>
                            </ul>
                            <div id="optionss">
                                <span class="xin">加入心愿单</span>
                                <span class="xin btn-delete " id="${this.shop[i].id}" >删除</span>
                                <span class="num">
                                    <button class="btleft btn-decrease" id="${this.shop[i].id}">
                                        -
                                    </button>
                                    <input type="text" name="" id="${this.shop[i].id}" class="numb" value="${this.shop[i].count}">
                                    <button class="btrig btn-increase" id="${this.shop[i].id}">
                                     +
                                    </button>
                                </span>
                                <input type="checkbox" checked="false" class="dc g1 checkout_cb" id="${this.shop[i].id}">
                            </div>
                        </div> 
                    </li>
            `)
        }
        
        // $(".qian").text(data.price);
       
          
        }
    }
    new ShopCar
})